<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet" />
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
  </head>
  <style>
    body {
      background: #eee;
    }
    #footer {
      padding: 15px;
      position: relative;
      bottom: 0;
      left: 0;
      background-color: #fff;
      border-radius: 15px;
      margin-top: 270px;
    }
    #content input {
      width: 15px;
      height: 15px;
    }
    .confirm-btn {
      width: 100%;
      border-radius: 20px;
      margin-top: 15px;
      background-color: #fb54aa;
      color: #ccc;
    }
  </style>
  <body>
    <div class="layui-container-fluid">
      <!-- 常规布局（以中型屏幕桌面为例）： -->
      <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-xs2 layui-col-xs-offset3">
          <input style="width: 15px; height: 15px" type="checkbox" checked />
          <span style="font-size: 12px; vertical-align: top">已售</span>
        </div>
        <div class="layui-col-xs2">
          <input style="width: 15px; height: 15px" type="checkbox" />
          <span style="font-size: 12px; vertical-align: top">未售</span>
        </div>
        <div class="layui-col-xs2">
          <input style="width: 15px; height: 15px" type="checkbox" />
          <span style="font-size: 12px; vertical-align: top">39.9元</span>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-xs5 layui-col-xs-offset4">2号激光放映厅 银幕</div>
      </div>
    </div>
    <!-- 座位 -->
    <div id="content" class="layui-container-fluid" style="padding: 20px">
      <div class="layui-row">
        <div id="panel" class="layui-col-xs8 layui-col-xs-offset2"></div>
      </div>
    </div>
    <!-- 底部 -->
    <div id="footer" class="layui-container">
      <!-- 电影名字 -->
      <div class="layui-row">
        <div class="layui-col-xs12">
          <span
            class="film-nm"
            style="color: black; font-weight: 600; font-size: 18px"
          ></span>
        </div>
      </div>
      <!-- 场次信息 -->
      <div class="layui-row">
        <div class="layui-col-xs8">
          <span style="color: #fb54aa">今天</span>
          <span class="time">今天</span>
          <span class="language"></span>
        </div>
      </div>
      <!-- 价格 -->
      <div class="layui-row">
        <div
          id="price"
          class="layui-col-xs8"
          style="font-size: 17px; font-weight: 600"
        >
          &nbsp;
        </div>
      </div>
      <!-- 按钮 -->
      <div class="layui-row">
        <div class="layui-col-xs12">
          <button class="confirm-btn layui-btn">请先选座</button>
        </div>
      </div>
    </div>
  </body>
  <script>
    layui.use("layer", function () {
      var layer = layui.layer;
    });
    var data = JSON.parse(localStorage.getItem("data"));

    $(function () {
      // 调用面板内容
      panel();
      //电影名字
      $(".film-nm").text(data.nm);
      //电影时间
      let times = time();
      $(".time").html(times);
      //国语
      $(".language").html(data.version == "v2d imax" ? "国语2D" : "国语3D");
      $(".input-one:lt(3)").prop("disabled", true);
      $(".input-one:gt(8)").prop("disabled", true);
      // 获取座位，并添加事件
      $(".inputs").on("click", seat);
    });
    // 选座成功结算
    $(".confirm-btn").on("click", function () {
      let num = $(".inputs:checked").length;

      if (num > 6) {
        layer.msg("最多只能选择6个座位");
        return;
      }
      if ($(".confirm-btn").html() === "请先选座") {
        layer.msg("请先选择座位");
        return;
      }
      layer.msg("购票成功");
    });
    // 座位
    function seat() {
      let num = $(".inputs:checked").length;
      if (num > 6) {
        layer.msg("已选6个,您不能再选啦!!!");
        return;
      } else {
        let Total_price = num * 39.9;
        Total_price = Total_price.toFixed(2);
        $("#price")
          .html("￥" + Total_price)
          .slideDown();
        $(".confirm-btn")
          .css("color", "#fff")
          .html(Total_price + "元" + "  确认选座");
      }
    }

    // 面板内容
    function panel() {
      let html = "";
      let html_two = "";
      for (let i = 0; i < 12; i++) {
        html += `
            <input type="checkbox" name="" id="" disabled/>
            <input type="checkbox" name="" id="" disabled/>
          `;
        html_two += `
            <input class="inputs" type="checkbox" name="" id="" />
            <input class="inputs" type="checkbox" name="" id="" />
            <input class="inputs" type="checkbox" name="" id="" />
            <input class="inputs" type="checkbox" name="" id="" />
            <input class="inputs" type="checkbox" name="" id="" />
            <input class="inputs" type="checkbox" name="" id="" />
          `;
      }
      $("#panel").html(html);
      $("#panel").append(html_two);
    }
    //封装时间
    function time() {
      let date = new Date();
      let month = date.getMonth() + 1; //月
      let date1 = date.getDate(); // 天
      let hour = date.getHours(); //小时
      let min = date.getMinutes(); // 分钟
      // 结束时间
      let hourOver = date.getHours() + 1; //小时
      let minOver = date.getMinutes() + 45; // 分钟
      let currentTime = `${month}月${date1}日 ${hour}:${min}-${hourOver}:${minOver}`;
      return currentTime;
    }
  </script>
</html>
